<template>
    <div class=''>
        <div v-for="item in name.list">{{ item }}</div>
    </div>
    <div>

    </div>

    <div @click="btn">点击修改ref数据</div>
    <div @click="btn1">点击修改shallowVal</div>
</template>

<script lang='ts' setup>

import { reactive, readonly } from 'vue';



interface M {
    list: Array<any>
}


let name = reactive<M>({
    list: [{ name: '4444' }, { name: '4555' }]
})
console.log('===>',name);
// 只读 
let readonlyVal = readonly<{ name: any }>({ name: 11 })
const btn = () => {
    let res = [1, 22, 33]
    console.log('===>222', 222);
    name.list = res
    //报错 只读
    // readonlyVal.name = 666
}



const btn1 = () => {

}

</script>

<style scoped lang='less'></style> 